<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型实践</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        /* 标准盒模型 */
        .content-box {
            width: auto;
            height: auto;
            padding: 20px;
            border: 5px solid blue;
            margin: 10px;
            background-color: #f0f8ff;
            box-sizing: content-box;
        }
        
        /* IE盒模型 */
        .border-box {
            width: auto;
            height: auto;
            padding: 20px;
            border: 5px solid red;
            margin: 10px;
            background-color: #fff0f5;
            box-sizing: border-box;
        }
        
        /* 盒模型各部分可视化 */
        .box-model-visual {
            width: 300px;
            height: 200px;
            margin: 30px;
            padding: 20px;
            border: 10px solid green;
            background-color: #f0fff0;
            position: relative;
        }
        
        .box-model-visual::before {
            content: "内容区";
            position: absolute;
            top: 50%;
            left: 50%;  /* 将元素左上角定位到父容器中心 */
            transform: translate(-50%, -50%);/* 通过自身尺寸的一半偏移实现真正居中 这种居中方法非常实用，特别适合在容器中居中显示文字或图标。*/
            font-weight: bold;
        }
        
        
        .margin-label {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #666;
            font-size: 12px;
        }
        
        .padding-label {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #666;
            font-size: 12px;
        }
        
        .border-label {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            color: green;
            font-size: 12px;
            background-color: white;
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <h1>CSS盒模型实践</h1>
    
    <div class="container">
        <h2>标准盒模型 vs IE盒模型</h2>
        
        <div class="content-box">
            <p>标准盒模型 (content-box)</p>
            <p>总宽度 = width + padding + border + margin</p>
            <p>实际宽度 = 200px + 20px*2 + 5px*2 = 250px  
                (此处将“width”与“height”改为“auto”以自适应文本宽度)
            </p>
        </div>
        
        <div class="border-box">
            <p>IE盒模型 (border-box)</p>
            <p>总宽度 = width + margin</p>
            <p>内容区宽度 = width - padding - border = 200px - 20px*2 - 5px*2 = 150px
                 (此处将“width”与“height”改为“auto”以自适应文本宽度)
            </p>
        </div>
    </div>
    
    <div class="container">
        <h2>盒模型各部分可视化</h2>
        
        <div class="box-model-visual">
            <span class="margin-label">外边距 (margin)</span>
            <span class="padding-label">内边距 (padding)</span>
            <span class="border-label">边框 (border)</span>
        </div>
    </div>
</body>
</html>